<template>
	<view class="help-container">
		<uni-nav-bar @clickLeft="$tab.back()" fixed="true" color="#fff" left-icon="left" backgroundColor="transparent"
			title="激活收款码" statusBar="true" :border="false" />
		<view class="paywaybg"></view>
		<view class="bg-FFF round-12 mx-20 flex flex-col items-center py-36" style="margin-top: -210rpx;">
			<view class="text-32 font-700">
				{{ title }}收款码
			</view>
			<view @click="albumClick" class="mt-48 flex align-center justify-around bg-F8F8F8 shadow-20 round-8" style="width: 420rpx;height: 420rpx;background: #F8F8F8;border: 2px solid #EEEEEE;">
				<view v-if="!moneyimg">
					<image src="http://img.kxjb1319.com/gsgxStatic/icon_shangchuan@2x.png" style="width: 96rpx;"
						mode="widthFix"></image>
				</view>
				<image v-if="moneyimg" :src="moneyimg" style="width: 100%;height: 100%;border-radius: 20rpx;" mode="">
				</image>
			</view>
			<view class="text-36 mt-36" @click="albumClick">
				{{ moneyimg ? '点击更换' : '点击上传' }}
			</view>
		</view>
		<view class="bg-FFF round-12 mx-20 mt-48  relative">
			<view class="flex">
				<view class="bg-FF8400 text-24 p-12 round-12 text-FFF">重要提示</view>
			</view>
			<view class="fontS-24 text-grey p-20">
				<text>激活收款以后将在交易过程中展示，请确认信息填写无误，以保证交易正常运行。</text>
			</view>
		</view>
		<view class="subSave bg-FF8400 text-FFF text-center py-20 round-20" @click="Submit">
			确认保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '收款码',
				moneyimg: null, //上传收款码
				form: {
					state: true
				},
				cardlistdetails: []
			}
		},
		onLoad(e) {
			this.title = e.name
			let user = this.$store.getters.userInfo
			if (e.name == '支付宝') {
				this.moneyimg = user.zfbQrCode || null
			} else if (e.name == '微信') {
				this.moneyimg = user.wxQrCode || null
			}
		},
		methods: {
			//保存
			Submit() {
				if (!this.moneyimg) {
					return false
				}
				
				if (this.title == '支付宝') {
					this.form = {
						zfbQrCode: this.moneyimg
					}
				} else if (this.title == '微信') {
					this.form = {
						wxQrCode: this.moneyimg
					}
				}

				uni.showLoading({
					title: '保存中'
				});

				this.$Api.user.updateUserInfo({
					...this.form
				}).then((res) => {
					this.$store.dispatch('GetInfo').then(user=>{
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							duration: 3000,
							icon: 'none'
						});
						this.$tab.back(1500)
					})
				})
			},
			//上传图片
			albumClick() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '图片上传中...'
						});
						const tempFilePaths = res.tempFilePaths;
						that.$Api.common.uploadFile(tempFilePaths[0]).then(res => {
							that.moneyimg = res.url
							uni.hideLoading();
						})
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	//导航样式
	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	/deep/.u-input {
		background-color: #f8f8f8 !important;
		border: none !important;
		padding: 8px 9px !important;
	}

	.paywaybg {
		background: url('http://img.kxjb1319.com/loginImg/bgpay@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 424rpx;
	}

	.subSave {
		position: fixed;
		bottom: 30rpx;
		left: 20rpx;
		right: 20rpx;
	}
</style>